<script setup lang="ts">
import {markRaw, onMounted, ref} from "vue";
import type {EChartsOption, EChartsType} from "echarts";
import * as echarts from "echarts";
import {useGetScatterDataApi} from "@/api";
import type {Scatter} from "@/interface"


const scatter = ref()
const option = ref<EChartsOption>()
const myChart = ref<EChartsType>()
const scatterData = ref<Scatter>({
  liner: [],
  scatter: [],
})
const init = async () => {
  const {data: res} = await useGetScatterDataApi()
  scatterData.value = res
  myChart.value = markRaw(echarts.init(scatter.value));
  draw();
}
const draw = () => {
  option.value = {
    title: {
      text: '广州景点热度与评分场次回归分析',
      left: 'center',
      textStyle: {
        color: 'rgb(238, 197, 102)'
      }
    },
    tooltip: {
    },
    xAxis: {
      axisLabel:{
        rotate:45,
        color: 'rgb(238, 197, 102)'
      },
      axisLine:{
        lineStyle: {
          color: 'rgb(238, 197, 102)'
        }
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgb(238, 197, 102)'
        }
      }
    },
    yAxis: {
      axisLabel:{
        rotate:45,
        color: 'rgb(238, 197, 102)'
      },
      axisLine:{
        lineStyle: {
          color: 'rgb(238, 197, 102)'
        }
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgb(238, 197, 102)'
        }
      }
    },
    series: [
      {
        name: '评分',
        type: 'scatter',
        symbolSize: 5,
        data: scatterData.value.scatter,
        itemStyle: {
          color: '#F9713C'
        },
      },
      {
        name: '回归线',
        type: 'line',
        data: scatterData.value.liner,
        symbolSize: 0.01,
        symbol: 'circle',
        encode: {label: 2, tooltip: 1},
        itemStyle: {
          color: '#B3E4A1'
        },
      }
    ]
  }
  myChart.value.setOption(option.value, {notMerge: true});
}
onMounted(() => {
  init()
})
</script>

<template>
  <div ref="scatter" class="scatter">
  </div>
</template>

<style scoped>
.scatter {
  width: 100%;
  height: 100%;
}
</style>